<template>
    <div class="articleList">
        <h2>文章列表</h2>
        <el-row :gutter="20" style="padding: 0 0 20px 0">
            <el-col :span="8">
                <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getList">
                    <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="danger" :disabled="deldisable" @click="batchDeletion">批量删除</el-button>
            </el-col>
        </el-row>

        <!-- 列表数据 -->
        <el-table :data="articlelist"  stripe  @selection-change="handleSelectionChange">>
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="分类" width="95px" prop="categoryName"></el-table-column>
            <el-table-column label="访问量" width="70px" prop="count"></el-table-column>
            <el-table-column label="创建时间"   width="140px" prop="createTime">
                <template slot-scope="scope">
                    {{scope.row.createTime | datetimeFormat}}
                </template>
            </el-table-column>
            <el-table-column label="修改时间"   width="140px" prop="updateTime">
                <template slot-scope="scope">
                    {{scope.row.updateTime | datetimeFormat}}
                </template>
            </el-table-column>
            </el-table-column>
            <el-table-column label="操作" width="130px">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-edit" @click="edit(scope.row.id)">修改</el-button>
                    <el-button type="text" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)">删除</el-button>
                    
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize: 5
            },
            deletelist: [],
            // 批量删除按钮
            isDel: false,
            
            articlelist: [],
            // 总数据条数
            total: 0,
        }
    },
    created() {
        this.getList()
    },
    computed: {
        deldisable() {
            return this.deletelist.length === 0
        } 
    },
    methods: {
        // 编辑文章
        edit(id) {
            this.$router.push(`/admin/article/${id}`)
        },
        // 根据分页获取对应的列表
        async getList() {
            const {data: res} = await this.$http.get('/article', { params: this.queryInfo})
            if (!res.status) {
                return this.$message.error(res.message)
            }

             this.$message.success(res.message)
             console.log(res.data);
             this.articlelist = res.data.records
             this.total = res.data.total

        },
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getList()
        },
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getList()
        },
        handleSelectionChange(val) {
            console.log(val);
            this.deletelist = val.map(item => item.id)
            console.log(this.deletelist);
        },
        async batchDeletion() {
            const confirmResult = await this.$confirm('是否删除？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)

            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除！')
            }
            // const ids = [1,2,3]
            const {data: res} = await this.$http.delete(`article`, {
                params: {
                    ids: this.deletelist + ''
                }
            })

            if (!res.status) {
                 return this.$message.error(res.data.message)
            }
            this.$message.success(res.data.message)
            this.getList()
        },
        async removeById(id) {
            console.log(id);
            const confirmResult = await this.$confirm('是否删除？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)

            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除！')
            }

            console.log(id);
            let ids = [id]
            console.log(ids);
            let params = {
                ids: ids + ''
            }
            console.log(params);
            const {data: res} = await this.$http.delete(`article`, {params})

            if (!res.status) {
                 return this.$message.error('删除失败！')
            }
            this.$message.success('删除成功！')
            this.getList()
        },
    }
}
</script>

<style>

</style>